<template>
<el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>文章分类</span>
    <el-button style="float: right" type="primary" size="small" @click="openDialog(null)">添加分类</el-button>
  </div>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      label="序号"
      width="100"
      type="index"
      >
    </el-table-column>
    <el-table-column
      fit
      label="分类名称"
      prop="cate_name"
      >
    </el-table-column>
    <el-table-column
      fit
      label="分类别名"
      prop="cate_alias"

     >
    </el-table-column>
    <el-table-column label="操作">
      <!-- scope的row属性可以拿到本行数据 -->
      <template #default="{row}">
          <el-button
            size="mini"
            type="primary"
            @click="openDialog(row.id)"
          >修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="delCate(row.id)"
          >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog :title="type+'文章分类'" :visible.sync="dialogFormVisible" width="40%" :before-close="handleClose">
      <!-- 表单区域 -->
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item label="分类名称" prop="cate_name">
          <el-input v-model="form.cate_name"></el-input>
        </el-form-item>
        <el-form-item label="分类别名" prop="cate_alias">
          <el-input v-model="form.cate_alias"></el-input>
        </el-form-item>
      </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false" size="mini">取 消</el-button>
    <el-button type="primary" @click="addClass(form.id)" size="mini">确 定</el-button>
  </div>
</el-dialog>
</el-card>

</template>

<script>
import { getArticleClass, addArticleCateAPI, getArticleDetailAPI, updateArticleCateAPI, delArticleCateAPI } from '@/api/article'
export default {
  name: 'art-cate',
  data () {
    const validateAlias = (rule, value, cb) => {
      const reg = /^[a-zA-Z0-9]{1,15}$/
      if (!reg.test(value)) {
        cb(new Error('请输入符合规范的别名'))
      } else {
        cb()
      }
    }
    return {
      tableData: [], // 表格数据
      dialogFormVisible: false, // 弹窗关闭
      form: {
        cate_name: '',
        cate_alias: ''
      },
      rules: {
        cate_name: [
          {
            required: true, message: '输入不能为空', trigger: 'blur'
          },
          {
            min: 1, max: 10, message: '长度在1到10个字符', trigger: 'blur'
          }
        ],
        cate_alias: [
          { required: true, message: '输入不能为空', trigger: 'blur' },
          {
            validator: validateAlias, message: '只能是字母数字', trigger: 'blur'
          },
          {
            min: 1, max: 15, message: '长度在1到15个字符', trigger: 'blur'
          }
        ]

      },
      type: '' // 操作类型

    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 渲染列表
    async getList () {
      const res = await getArticleClass()
      this.tableData = [...res.data]
    },
    async openDialog (id) {
      // 通过是否传递id，判断是走编辑还是走的添加
      if (id) {
        this.type = '编辑'
        const res = await getArticleDetailAPI(id)
        this.form = res.data
      } else {
        this.type = '添加'
        this.form = {
          cate_name: '',
          cate_alias: ''
        }
      }
      // 打开弹窗
      this.dialogFormVisible = true
    },
    async addClass (id) {
      // 统一校验
      this.$refs.form.validate(async valid => {
        if (valid) {
          if (!id) {
            // 通过之后，发请求
            await addArticleCateAPI(this.form)
            this.$message.success('添加成功')
          } else {
            // 发送更新请求
            await updateArticleCateAPI(this.form)
            this.$message.success('编辑成功')
          }
          // 重新渲染
          this.getList()
          // 关闭弹窗
          this.handleClose()
        }
      })
    },
    // 删除分类
    async delCate (id) {
      await delArticleCateAPI(id)
      this.$message.success('删除分类成功')
      this.getList()
    },

    // 关闭弹窗,重置表单内容
    handleClose (done) {
      // this.$refs.form.resetFields()
      this.dialogFormVisible = false
    }
  }
}
</script>

<style>

</style>
